<template>
	<div class="savePage">
		<div class="search-view">
			<Input 
				v-model="saveData.page.key" 
				icon="ios-search"  
				placeholder="请输入姓名或者手机号查询" 
				style="width: 3rem"
				@on-blur="blurSearch"></Input>
			<div class="add-save">
				<Button type="primary" @click="clickAddSave">新建存入</Button>
			</div>
		</div>
		<div class="list-view">
			<XSaveListView
				:data="saveData"
				@on-action="clickUpSave">
			</XSaveListView>
		</div>
		<!-- 新建存入 -->
		<div v-if="addSaveData.isShow">
			<XSaveActionModal
				:data="addSaveData"
                @on-click-add="clickAdd"
                @on-click-del="clickDel"
                @on-blur="onBlur"
                @on-submit="clickSubmit">
			</XSaveActionModal>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
import saveService from '@/network/service/saveService.js'
import XSaveListView from '@/pages/save/view/XSaveListView'
import XSaveActionModal from '@/pages/save/view/XSaveActionModal'
export default {
	components: {
		XSaveListView,
		XSaveActionModal
	},
	data() {
		return {
			saveData: {
				isLoading: false,
				data: [],
				listType: 'save',
				page: {
					currentPage: 0,
					pagesize: 20,
					totalSize: 0,
					key: ''
				}
			},
			addSaveData: {
				isShow: false,
				isLoading: false,
				row: null,
				storeList: [],
				data: {
					userName: null,
					phone: null,
					storeHouseId: null,
					accountId: null,
					remark: null,
					pros: [
						{
							productBar: '',
							productName: '',
							number: 1,
							productId: '',
						}
					],
				}
			}
		}
	},
	mounted() {
		let input = $('.savePage .ivu-input');
		let table = $('.savePage .ivu-table');
		let selects = $('.ivu-select');
		let select = $('.ivu-page-options-elevator input');
		for(let i = 0; i < input.length; i++) {
			input[i].style.color = 'rgba(255, 255, 255, 0.6)'
		}
		for(let i = 0; i < table.length; i++) {
			table[i].style.color = 'rgba(255, 255, 255, 0.6)'
		}
		for(let i = 0; i < select.length; i++) {
			select[i].style.color = 'rgba(255, 255, 255, 0.6)'
		}
		for(let i = 0; i < selects.length; i++) {
			selects[i].style.color = 'rgba(255, 255, 255, 0.6)'
		}
		this.getSaveList();
		this.getStorHouse();
	},
	methods: {
		blurSearch() {
			this.getSaveList();
		},
		clickAddSave() {
			this.addSaveData.isShow = true;
			this.addSaveData.isLoading = false;
			this.addSaveData.data = {
				userName: null,
				phone: null,
				storeHouseId: null,
				accountId: this.$store.getters.account.accId,
				remark: null,
				pros: [
					{
						productBar: '',
						productName: '',
						number: 1,
						productId: '',
					}
				],
			}
		},
		clickAdd() {
			let data = this.addSaveData.data.pros;
			let params = {};
			let flag = false;
			data.forEach(item => {
				if (item.productBar == '') {
					this.$Message.error('请输入商品条形码后，再添加');
					flag = true;
				}
			})
			if (!flag) {
				params = {
					productBar: '',
					productName: '',
					number: 1,
				}
				data.push(params);
			}
			
		},
		clickDel(item, index) {
			if (this.addSaveData.data.pros.length == 1) {
				this.$Message.error('不能删除')
			} else {
				this.addSaveData.data.pros.splice(index, 1);
			}
		},
		onBlur(params) {
			if (params.productBar != '') {
				let data = this.addSaveData.data.pros;
				let flag = false;
				if (data.length != 1) {
					for(let i = 0; i < data.length - 1; i++) {
						let item = data[i];
						if (params.productBar.toLowerCase() == item.productBar.toLowerCase()) {
							flag = true;
						}
					}
				}
				if (flag) {
					this.$Message.error('条形码重复');
				} else {
					this.getProduct(params);
				}
			} else {
				this.$Message.error('条形码为空')
			}
		},
		clickSubmit(formData) {
			this.addStorage(formData);
		},
		clickUpSave(formData) {
			this.$Modal.confirm({
				title: '客存取出',
				content: '是否取出该客存订单',
				onOk: () => {
					this.upStorage(formData);
				}
			});
		},
			
		getSaveList() {
			let params = {
				page: this.saveData.page.currentPage,
				pageSize: this.saveData.page.pagesize,
				selectName: this.saveData.page.key
			}
			saveService.getStorageList(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.saveData.data = result.data;
					this.saveData.page.totalSize = result.totalSize;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getStorHouse() {
			saveService.getStorHouse('6').then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.addSaveData.storeList = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		upStorage(formData) {
			saveService.upStorage(formData.row.did).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.saveData.data.splice(formData.index, 1);
					this.$Message.success('客存已取出');
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getProduct(item) {
			let params = {
				name: '',
				productBar: item.productBar
			}
			saveService.getProduct(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				if (code == 100) {
					item.unit = result.data[0].unit;
					item.productName = result.data[0].name;
					item.productId = result.data[0].pid;
				} else {
					this.$Message.error(result.msg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		addStorage(formData) {
			let params = {
				userName: formData.data.name,
				phone: formData.data.phoneNum,
				storeHouseId: formData.data.storeHouseId,
				accountId: formData.data.accountId,
				remark: formData.data.remark,
				pros: formData.data.pros,
			}
			formData.isLoading = true;
			saveService.addStorage(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				if (code == 100) {
					this.saveData.data.unshift(result.data);
					formData.isShow = false;
					formData.isLoading = false;
				} else {
					formData.isLoading = false;
					this.$Message.error(result.msg);
				}
			}, error => {
				formData.isLoading = false;
				this.$Message.error('服务器异常，请稍后再试')
			})
		}
	}
}
</script>

<style scoped lang="less">
.savePage {
	width: 100%;
	height: 100%;
	padding: .1rem .1rem 0 .1rem;
	color: #fff;
	.search-view {
		position: relative;
		margin-bottom: .4rem;
		.add-save {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
}
</style>